// src/components/challenge/UserDetail.jsx
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { getItem } from '../../utils/localStorage';

const UserDetail = () => {
  const { userId } = useParams();
  const [userData, setUserData] = useState(null);
  const [achievements, setAchievements] = useState([]);
  const [recentRaces, setRecentRaces] = useState([]);

  useEffect(() => {
    // Fetch user data
    const rankings = JSON.parse(getItem('rankings') || '[]');
    const user = rankings.find((u) => u.userId === parseInt(userId));
    setUserData(user);

    // Initialize sample achievements
    setAchievements([
      {
        id: 1,
        title: '速度之王',
        description: '在上海国际赛道创下最快圈速',
        date: '2024-02-15',
        icon: '🏆'
      },
      {
        id: 2,
        title: '耐力达人',
        description: '完成10次2小时以上的比赛',
        date: '2024-02-10',
        icon: '⚡'
      }
    ]);

    // Initialize sample recent races
    setRecentRaces([
      {
        id: 1,
        track: '上海国际赛道',
        date: '2024-02-20',
        lapTime: '1:32.456',
        position: 1
      },
      {
        id: 2,
        track: '珠海国际赛道',
        date: '2024-02-18',
        lapTime: '1:45.789',
        position: 2
      }
    ]);
  }, [userId]);

  if (!userData) {
    return <div className="text-center py-8">加载中...</div>;
  }

  return (
    <div className="space-y-8">
      <div className="bg-white rounded-lg shadow-md p-6">
        <div className="flex items-center space-x-4">
          <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center">
            <span className="text-2xl">{userData.username[0].toUpperCase()}</span>
          </div>
          <div>
            <h1 className="text-2xl font-bold text-gray-900">
              {userData.username}
            </h1>
            <p className="text-gray-500">
              排名 #{userData.rank} · {userData.points} 积分
            </p>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-lg shadow-md p-6">
        <h2 className="text-xl font-semibold mb-4">成就</h2>
        <div className="grid gap-4">
          {achievements.map((achievement) => (
            <div
              key={achievement.id}
              className="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg"
            >
              <span className="text-2xl">{achievement.icon}</span>
              <div>
                <h3 className="font-semibold">{achievement.title}</h3>
                <p className="text-sm text-gray-600">
                  {achievement.description}
                </p>
                <span className="text-sm text-gray-500">
                  获得于 {achievement.date}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-white rounded-lg shadow-md p-6">
        <h2 className="text-xl font-semibold mb-4">最近比赛</h2>
        <div className="space-y-4">
          {recentRaces.map((race) => (
            <div
              key={race.id}
              className="flex justify-between items-center p-4 bg-gray-50 rounded-lg"
            >
              <div>
                <h3 className="font-semibold">{race.track}</h3>
                <p className="text-sm text-gray-500">{race.date}</p>
              </div>
              <div className="text-right">
                <p className="font-semibold">
                  {race.position === 1 ? '🥇' : race.position === 2 ? '🥈' : '🥉'}{' '}
                  第{race.position}名
                </p>
                <p className="text-sm text-gray-600">最快圈速: {race.lapTime}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default UserDetail;